import React from "react"
import { Form, Input, Checkbox, Button } from "antd";
import actions from "../store/actions/user"
import { connect } from "react-redux";
function Login(props) {
    console.log(props);
    const onFinish = (values) => {
        console.log("shuju", values);
        props.login(values).then((res) => {
            if (res.code === 200) {
                props.history.push("/manage/user/student")
            }
        })
    }
    const rules = {
        username: [
            {
                required: true,
                message: '请输入用户名123!',
            },
        ],
        password: [
            {
                required: true,
                message: '请输入密码!',
            },
        ]
    }
    return (
        <div style={{ paddingTop: 300 }}>
            <Form
                name="basic"
                labelCol={{
                    span: 6,
                }}
                wrapperCol={{
                    span: 16,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                autoComplete="off"
                style={{ margin: 'auto', width: '500px', height: '300px', overflow: 'hidden', backgroundColor: "rgba(169, 169, 169, 0.7)", padding: 50 }}

            >
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={rules.username}
                >
                    <Input style={{ width: '200px' }} />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    rules={rules.password}
                >
                    <Input.Password style={{ width: '200px' }} />
                </Form.Item>

                <Form.Item
                    name="remember"
                    valuePropName="checked"
                    wrapperCol={{
                        offset: 6,
                        span: 16,
                    }}
                >
                    <Checkbox>Remember me</Checkbox>
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 6,
                        span: 16,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}
function tostate(state, oldprops) {
    return {
        state
    }
}
function todispatch(dispatch, olddispatch) {
    return {
        login(values) {
            return dispatch(actions.loginAsync(values))
        }
    }
}
Login = connect(tostate, todispatch)(Login)
export default Login